<template>
  <div class="example">
    <input v-model.number="number" type="number" step="20">
    <p>{{ animatedNumber }}</p>
  </div>
</template>

<script>
/**
 * 例子 - 状态过渡 - 数字动画
 */

/**
 * 动态加载JavaScript
 */
function loadJS(url) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

export default {
  data() {
    return {
      number: 0,
      tweenedNumber: 0
    }
  },
  created() {
    loadJS('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js');
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    }
  }
}
</script>

<style lang="less" scoped>
.example {
  width: 600px;
}
</style>
